<template>
  <div class="page">
    <div class="p20">
      <div v-hasAuth:home_seestarReport.home_seestarReportByPlatform.invert>
        欢迎来到{{ $store.state.settings.title }}管理系统
      </div>
      <div class="f-floor" v-hasAuth:home_seestarReport>
        <div>
          <el-form :inline="true" class="demo-ruleForm">
            <el-form-item label="部门数据详情"></el-form-item>
            <el-form-item>
              <el-button
                :type="seestarReportAjax.yesterdayBtn"
                @click="rToyesterday"
                >昨日数据</el-button
              >
            </el-form-item>
            <el-form-item>
              <el-date-picker
                v-model="alone.seestarSearchForm.data.dateTime"
                type="datetimerange"
                range-separator="至"
                start-placeholder="请选择创建开始时间"
                end-placeholder="请选择创建结束时间"
                format="yyyy-MM-dd HH:mm:ss"
                value-format="yyyy-MM-dd HH:mm:ss"
                @change="rSubmitSeestarReportSearchForm"
              ></el-date-picker>
            </el-form-item>
            <el-form-item>
              <el-button type="default" @click="rDownSeestarReport"
                >导出数据</el-button
              >
            </el-form-item>
          </el-form>
        </div>
        <div class="c-aside clearfix">
          <div class="clearfix">
            <div class="c-item fl">
              <div class="c-title fl"></div>
              <div class="c-main fl">
                <p class="c-m-title"></p>
                <p class="c-m-main">
                  共
                  <span>{{ seestarReportAjax.countData.recruitCount }}</span
                  >位招募人员
                </p>
              </div>
            </div>
            <div class="c-item fl">
              <div class="c-title fl c-title-icon">
                <i class="el-icon-user"></i>
              </div>
              <div class="c-main fl">
                <p class="c-m-title">新建主播总数</p>
                <p class="c-m-main">
                  {{ seestarReportAjax.countData.totalCount }}
                </p>
              </div>
            </div>
            <div class="c-item fl">
              <div class="c-title fl c-title-icon">
                <i class="el-icon-star-off"></i>
              </div>
              <div class="c-main fl">
                <p class="c-m-title">意向主播</p>
                <p class="c-m-main">
                  {{ seestarReportAjax.countData.intentionCount }}
                </p>
              </div>
            </div>
            <div class="c-item fl">
              <div class="c-title fl c-title-icon">
                <i class="el-icon-refresh"></i>
              </div>
              <div class="c-main fl">
                <p class="c-m-title">送审主播</p>
                <p class="c-m-main">
                  {{ seestarReportAjax.countData.toVerifyCount }}
                </p>
              </div>
            </div>
            <div class="c-item fl">
              <div class="c-title fl c-title-icon">
                <i class="el-icon-headset"></i>
              </div>
              <div class="c-main fl">
                <p class="c-m-title">试播主播</p>
                <p class="c-m-main">
                  {{ seestarReportAjax.countData.trialCount }}
                </p>
              </div>
            </div>
            <div class="c-item fl">
              <div class="c-title fl c-title-icon">
                <i class="el-icon-video-play"></i>
              </div>
              <div class="c-main fl">
                <p class="c-m-title">已开播主播</p>
                <p class="c-m-main">
                  {{ seestarReportAjax.countData.launchedCount }}
                </p>
              </div>
            </div>
          </div>
        </div>
        <div class="c-section">
          <el-table
            :data="seestarReportAjax.data"
            stripe
            style="width: 100%"
            row-key="id"
          >
            <el-table-column label="组别/招募">
              <template slot-scope="scope">
                <span>
                  {{
                    scope.row.userId
                      ? scope.row.realName
                      : scope.row.departmentName + scope.row.recruitCount + "人"
                  }}
                </span>
              </template>
            </el-table-column>
            <el-table-column label="新建主播总数">
              <template slot-scope="scope">
                <span>
                  {{ scope.row.totalCount }}
                  {{
                    getCategoryStr({
                      offline: scope.row.totalCountOffline,
                      online: scope.row.totalCountOnline,
                      scout: scope.row.totalCountScout,
                      union: scope.row.totalCountUnion
                    })
                  }}
                </span>
              </template>
            </el-table-column>
            <el-table-column label="意向主播数量">
              <template slot-scope="scope">
                <span>
                  {{
                    scope.row.intentionCount +
                      getCategoryStr({
                        offline: scope.row.intentionCountOffline,
                        online: scope.row.intentionCountOnline,
                        scout: scope.row.intentionCountScout,
                        union: scope.row.intentionCountUnion
                      })
                  }}
                </span>
              </template>
            </el-table-column>
            <el-table-column label="送审主播数量">
              <template slot-scope="scope">
                <span>
                  {{
                    scope.row.toVerifyCount +
                      getCategoryStr({
                        offline: scope.row.toVerifyCountOffline,
                        online: scope.row.toVerifyCountOnline,
                        scout: scope.row.toVerifyCountScout,
                        union: scope.row.toVerifyCountUnion
                      })
                  }}
                </span>
              </template>
            </el-table-column>
            <el-table-column label="试播主播数量">
              <template slot-scope="scope">
                <span>
                  {{
                    scope.row.trialCount +
                      getCategoryStr({
                        offline: scope.row.trialCountOffline,
                        online: scope.row.trialCountOnline,
                        scout: scope.row.trialCountScout,
                        union: scope.row.trialCountUnion
                      })
                  }}
                </span>
              </template>
            </el-table-column>
            <el-table-column label="已开播主播数量">
              <template slot-scope="scope">
                <span>
                  {{
                    scope.row.launchedCount +
                      getCategoryStr({
                        offline: scope.row.launchedCountOffline,
                        online: scope.row.launchedCountOnline,
                        scout: scope.row.launchedCountScout,
                        union: scope.row.launchedCountUnion
                      })
                  }}
                </span>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <div class="f-floor" v-hasAuth:home_seestarReportByPlatform>
        <div>
          <el-form :inline="true" class="demo-ruleForm">
            <el-form-item
              label="平台维度数据详情 (注：同一主播可同时发布到多个平台作为新建、意向、送审主播，试播及已开播平台暂为绑定运营所属平台)"
            ></el-form-item>
            <div></div>
            <el-form-item>
              <el-button
                :type="seestarReportByPlatformAjax.yesterdayBtn"
                @click="rToyesterdayByPlatform"
                >昨日数据</el-button
              >
            </el-form-item>
            <el-form-item>
              <el-date-picker
                v-model="alone.seestarSearchFormByPlatform.data.dateTime"
                type="datetimerange"
                range-separator="至"
                start-placeholder="请选择创建开始时间"
                end-placeholder="请选择创建结束时间"
                format="yyyy-MM-dd HH:mm:ss"
                value-format="yyyy-MM-dd HH:mm:ss"
                @change="rSubmitSeestarReportSearchFormByPlatform"
              ></el-date-picker>
            </el-form-item>
            <el-form-item>
              <el-button type="default" @click="rDownSeestarReportByPlatform"
                >导出数据</el-button
              >
            </el-form-item>
          </el-form>
        </div>

        <div class="c-section">
          <el-table
            :data="seestarReportByPlatformAjax.data"
            stripe
            style="width: 100%"
            row-key="id"
          >
            <el-table-column label="平台/分区">
              <template slot-scope="scope">
                <span>
                  {{ scope.row.platformName }}
                </span>
              </template>
            </el-table-column>
            <el-table-column label="新建主播总数">
              <template slot-scope="scope">
                <span>
                  {{ scope.row.totalCountSource.count }}
                  {{
                    getCategoryStr({
                      offline: scope.row.totalCountSource.countOffline,
                      online: scope.row.totalCountSource.countOnline,
                      scout: scope.row.totalCountSource.countScout,
                      union: scope.row.totalCountSource.countUnion
                    })
                  }}
                </span>
              </template>
            </el-table-column>
            <el-table-column label="意向主播数量">
              <template slot-scope="scope">
                <span>
                  {{
                    scope.row.intentionCount.count +
                      getCategoryStr({
                        offline: scope.row.intentionCount.countOffline,
                        online: scope.row.intentionCount.countOnline,
                        scout: scope.row.intentionCount.countScout,
                        union: scope.row.intentionCount.countUnion
                      })
                  }}
                </span>
              </template>
            </el-table-column>
            <el-table-column label="送审主播数量">
              <template slot-scope="scope">
                <span>
                  {{
                    scope.row.toVerifyCount.count +
                      getCategoryStr({
                        offline: scope.row.toVerifyCount.countOffline,
                        online: scope.row.toVerifyCount.countOnline,
                        scout: scope.row.toVerifyCount.countScout,
                        union: scope.row.toVerifyCount.countUnion
                      })
                  }}
                </span>
              </template>
            </el-table-column>
            <el-table-column label="试播主播数量">
              <template slot-scope="scope">
                <span>
                  {{
                    scope.row.trialCount.count +
                      getCategoryStr({
                        offline: scope.row.trialCount.countOffline,
                        online: scope.row.trialCount.countOnline,
                        scout: scope.row.trialCount.countScout,
                        union: scope.row.trialCount.countUnion
                      })
                  }}
                </span>
              </template>
            </el-table-column>
            <el-table-column label="已开播主播数量">
              <template slot-scope="scope">
                <span>
                  {{
                    scope.row.launchedCount.count +
                      getCategoryStr({
                        offline: scope.row.launchedCount.countOffline,
                        online: scope.row.launchedCount.countOnline,
                        scout: scope.row.launchedCount.countScout,
                        union: scope.row.launchedCount.countUnion
                      })
                  }}
                </span>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import {
  getSeestarReport,
  downSeestarReport,
  getSeestarReportByPlatform,
  downSeestarReportByPlatform
} from "@/api/home.js";
export default {
  name: "dashboard",
  data: () => ({
    seestarReportAjax: {
      first: true,
      data: [],
      countData: {},
      yesterdayBtn: "primary"
    },
    seestarReportByPlatformAjax: {
      first: true,
      data: [],
      countData: {},
      yesterdayBtn: "primary"
    },
    alone: {
      seestarSearchForm: {
        data: {
          dateTime: "",
          createTimeStart: "",
          createTimeEnd: ""
        }
      },
      seestarSearchFormByPlatform: {
        data: {
          dateTime: "",
          createTimeStart: "",
          createTimeEnd: ""
        }
      }
    }
  }),

  created() {
    this.rToyesterday();
    this.rToyesterdayByPlatform();
  },
  methods: {
    /*
     * 按部门维度获取数据
     */
    rSubmitSeestarReportSearchForm() {
      let _that = this;
      if (_that.seestarReportAjax.loading) {
        return;
      }
      if (_that.alone.seestarSearchForm.data.dateTime) {
        _that.seestarReportAjax.yesterdayBtn = "default";
      }

      _that.getSeestarReport();
    },
    getSeestarReport() {
      let _that = this;
      if (!_that.hasAuth(["home_seestarReport"])) {
        return;
      }

      if (_that.alone.seestarSearchForm.data.dateTime) {
        _that.alone.seestarSearchForm.data.createTimeStart =
          _that.alone.seestarSearchForm.data.dateTime[0] || "";
        _that.alone.seestarSearchForm.data.createTimeEnd =
          _that.alone.seestarSearchForm.data.dateTime[1] || "";
      }

      let seestarSearchForm = _that.alone.seestarSearchForm;

      if (_that.seestarReportAjax.loading) {
        return;
      }
      _that.seestarReportAjax.loading = true;

      let data = { ...seestarSearchForm.data };
      delete data.dateTime;

      getSeestarReport({ params: data })
        .then(resp => {
          let respData = resp.data || {};

          if (respData.code === _that.STATUS.success[0]) {
            let RespDataReal = respData.data || {};
            let statusCountData = RespDataReal.statusCount || {};
            _that.seestarReportAjax.countData = statusCountData;
            if (_that.seestarReportAjax.first) {
              _that.seestarReportAjax.first = false;
            }
            statusCountData.children = statusCountData.children || [];
            _that.seestarReportAjax.data = statusCountData.children;
          } else {
            _that.$message.error(respData.msg || "查询失败");
          }
        })
        .finally(() => {
          _that.seestarReportAjax.loading = false;
        });
    },
    rToyesterday() {
      let _that = this;
      _that.seestarReportAjax.yesterdayBtn = "primary";
      let startTime1 =
        new Date(new Date().toLocaleDateString()).getTime() -
        24 * 60 * 60 * 1000; // 当天0点
      let endTime1 = new Date(new Date().toLocaleDateString()).getTime();
      let startTime = _that.getTime(startTime1);
      let endTime = _that.getTime(endTime1);
      _that.alone.seestarSearchForm.data.dateTime = [startTime, endTime];

      _that.getSeestarReport();
    },
    rDownSeestarReport() {
      let _that = this;
      if (!_that.hasAuth(["home_seestarReport"])) {
        return;
      }

      if (_that.alone.seestarSearchForm.data.dateTime) {
        _that.alone.seestarSearchForm.data.createTimeStart =
          _that.alone.seestarSearchForm.data.dateTime[0] || "";
        _that.alone.seestarSearchForm.data.createTimeEnd =
          _that.alone.seestarSearchForm.data.dateTime[1] || "";
      }

      let seestarSearchForm = _that.alone.seestarSearchForm;

      if (_that.seestarReportAjax.loading) {
        return;
      }
      let loadingHandle = _that.$loading({
        text: "下载中。。。",
        lock: true
      });

      let data = { ...seestarSearchForm.data };
      delete data.dateTime;

      downSeestarReport({ params: data })
        .then(resp => {
          let respData = resp.data || {};

          //if (respData.code === _that.STATUS.success[0]) {
          var blob = new Blob([respData]);
          var downloadElement = document.createElement("a");
          var href = window.URL.createObjectURL(blob); //创建下载的链接
          downloadElement.href = href;
          downloadElement.download = "招募主播数据(部门分布).xlsx"; //下载后文件名
          document.body.appendChild(downloadElement);
          downloadElement.click(); //点击下载
          document.body.removeChild(downloadElement); //下载完成移除元素
          window.URL.revokeObjectURL(href); //释放掉blob对象
          // } else {
          //   _that.$message.error(respData.msg || "查询失败");
          // }
        })
        .finally(() => {
          loadingHandle.close();
        });
    },
    /*
     * 按平台维度获取数据
     */
    rSubmitSeestarReportSearchFormByPlatform() {
      let _that = this;
      if (_that.seestarReportAjax.loading) {
        return;
      }
      if (_that.alone.seestarSearchFormByPlatform.data.dateTime) {
        _that.seestarReportByPlatformAjax.yesterdayBtn = "default";
      }

      _that.getSeestarReportByPlatform();
    },
    getSeestarReportByPlatform() {
      let _that = this;
      if (!_that.hasAuth(["home_seestarReportByPlatform"])) {
        return;
      }

      if (_that.alone.seestarSearchFormByPlatform.data.dateTime) {
        _that.alone.seestarSearchFormByPlatform.data.createTimeStart =
          _that.alone.seestarSearchFormByPlatform.data.dateTime[0] || "";
        _that.alone.seestarSearchFormByPlatform.data.createTimeEnd =
          _that.alone.seestarSearchFormByPlatform.data.dateTime[1] || "";
      }

      let seestarSearchFormByPlatform = _that.alone.seestarSearchFormByPlatform;

      if (_that.seestarReportByPlatformAjax.loading) {
        return;
      }
      _that.seestarReportByPlatformAjax.loading = true;

      let data = { ...seestarSearchFormByPlatform.data };
      delete data.dateTime;

      getSeestarReportByPlatform({ params: data })
        .then(resp => {
          let respData = resp.data || {};

          if (respData.code === _that.STATUS.success[0]) {
            let RespDataReal = respData.data || {};
            let statusCountData = RespDataReal.statusCountPlat || {};
            // _that.seestarReportByPlatformAjax.countData = statusCountData;
            if (_that.seestarReportByPlatformAjax.first) {
              _that.seestarReportByPlatformAjax.first = false;
            }
            statusCountData.children = statusCountData.children || [];
            _that.seestarReportByPlatformAjax.data = statusCountData.children;
          } else {
            _that.$message.error(respData.msg || "查询失败");
          }
        })
        .finally(() => {
          _that.seestarReportByPlatformAjax.loading = false;
        });
    },
    rToyesterdayByPlatform() {
      let _that = this;
      _that.seestarReportByPlatformAjax.yesterdayBtn = "primary";
      let startTime1 =
        new Date(new Date().toLocaleDateString()).getTime() -
        24 * 60 * 60 * 1000; // 当天0点
      let endTime1 = new Date(new Date().toLocaleDateString()).getTime();
      let startTime = _that.getTime(startTime1);
      let endTime = _that.getTime(endTime1);
      _that.alone.seestarSearchFormByPlatform.data.dateTime = [
        startTime,
        endTime
      ];

      _that.getSeestarReportByPlatform();
    },
    rDownSeestarReportByPlatform() {
      let _that = this;
      if (!_that.hasAuth(["home_seestarReportByPlatform"])) {
        return;
      }

      if (_that.alone.seestarSearchFormByPlatform.data.dateTime) {
        _that.alone.seestarSearchFormByPlatform.data.createTimeStart =
          _that.alone.seestarSearchFormByPlatform.data.dateTime[0] || "";
        _that.alone.seestarSearchFormByPlatform.data.createTimeEnd =
          _that.alone.seestarSearchFormByPlatform.data.dateTime[1] || "";
      }

      let seestarSearchFormByPlatform = _that.alone.seestarSearchFormByPlatform;

      if (_that.seestarReportByPlatformAjax.loading) {
        return;
      }

      let data = { ...seestarSearchFormByPlatform.data };
      delete data.dateTime;

      let loadingHandle = _that.$loading({
        text: "下载中。。。",
        lock: true
      });

      downSeestarReportByPlatform({ params: data })
        .then(resp => {
          let respData = resp.data || {};

          //if (respData.code === _that.STATUS.success[0]) {
          var blob = new Blob([respData]);
          var downloadElement = document.createElement("a");
          var href = window.URL.createObjectURL(blob); //创建下载的链接
          downloadElement.href = href;
          downloadElement.download = "招募主播数据(平台分布).xlsx"; //下载后文件名
          document.body.appendChild(downloadElement);
          downloadElement.click(); //点击下载
          document.body.removeChild(downloadElement); //下载完成移除元素
          window.URL.revokeObjectURL(href); //释放掉blob对象
          // } else {
          //   _that.$message.error(respData.msg || "查询失败");
          // }
        })
        .finally(() => {
          loadingHandle.close();
        });
    },
    getTime(timestamp) {
      let d = new Date(timestamp) || new Date();
      let year = d.getFullYear();
      let month =
        d.getMonth() + 1 < 10 ? "0" + (d.getMonth() + 1) : d.getMonth() + 1;
      let date = d.getDate() < 10 ? "0" + d.getDate() : d.getDate();
      let hours = d.getHours() < 10 ? "0" + d.getHours() : d.getHours();
      let minutes = d.getMinutes() < 10 ? "0" + d.getMinutes() : d.getMinutes();
      let seconds = d.getSeconds() < 10 ? "0" + d.getSeconds() : d.getSeconds();
      var datetime =
        year +
        "-" +
        month +
        "-" +
        date +
        " " +
        hours +
        ":" +
        minutes +
        ":" +
        seconds;
      return datetime;
    },
    getCategoryStr(data) {
      let str = "";

      if (data.offline) {
        str += " 自招线下:" + data.offline;
      }
      if (data.online) {
        str += " 自招线上:" + data.online;
      }
      if (data.scout) {
        str += " 星探:" + data.scout;
      }
      if (data.union) {
        str += " 联营:" + data.union;
      }

      if (str) {
        str = "(" + str + ")";
      }

      return str;
    }
  }
};
</script>
<style lang="scss" scoped>
.page {
  .f-floor {
    margin-bottom: 30px;
    padding: 10px;
    box-shadow: 0 0 10px #e4e7ed;
    .c-aside {
      padding: 5px 10px;
      border: 1px solid #ccc;
    }
    .c-item {
      margin-right: 30px;
      &:first-child {
        .c-main {
          line-height: 70px;
          text-align: left;
        }
      }
    }
    .c-title {
      line-height: 2;
      color: #000;
      font-size: 18px;
      margin-right: 20px;
    }
    .c-main {
      line-height: 2;
      text-align: center;
    }
    .c-m-title {
      padding: 0;
    }
    .c-m-main {
      font-weight: 700;
    }
    .c-title-icon {
      line-height: 60px;
      font-size: 40px;
      margin-right: 5px;
      font-weight: 700;
    }
    .c-section {
      border-top: 1px solid #ccc;
      padding: 20px 0;
    }
  }
}
</style>
